

import React, { useEffect, useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import styles from './styles.module.css';

const PrivacyPolicyPage: React.FC = () => {
  const navigate = useNavigate();
  const [globalSearchValue, setGlobalSearchValue] = useState('');

  useEffect(() => {
    const originalTitle = document.title;
    document.title = '隐私政策 - 学途';
    return () => { document.title = originalTitle; };
  }, []);

  const handleGlobalSearchKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Enter') {
      const searchTerm = globalSearchValue.trim();
      if (searchTerm) {
        navigate(`/course-list?search=${encodeURIComponent(searchTerm)}`);
      }
    }
  };

  const handleNotificationsClick = () => {
    navigate('/messages');
  };

  return (
    <div className={styles.pageWrapper}>
      {/* 顶部导航栏 */}
      <header className="bg-white shadow-sm border-b border-border-light fixed top-0 left-0 right-0 z-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16">
            {/* Logo和网站名称 */}
            <div className="flex items-center space-x-3">
              <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
                <i className="fas fa-graduation-cap text-white text-lg"></i>
              </div>
              <span className="text-xl font-bold text-text-primary">学途</span>
            </div>
            
            {/* 主导航菜单 */}
            <nav className="hidden md:flex items-center space-x-8">
              <Link to="/home" className="text-text-secondary hover:text-primary py-1 transition-colors">首页</Link>
              <Link to="/course-list" className="text-text-secondary hover:text-primary py-1 transition-colors">课程中心</Link>
              <Link to="/about-us" className="text-text-secondary hover:text-primary py-1 transition-colors">关于我们</Link>
              <Link to="/help-center" className="text-text-secondary hover:text-primary py-1 transition-colors">帮助中心</Link>
            </nav>
            
            {/* 搜索框 */}
            <div className="hidden lg:flex items-center">
              <div className="relative">
                <input 
                  type="text" 
                  placeholder="搜索课程、讲师..." 
                  value={globalSearchValue}
                  onChange={(e) => setGlobalSearchValue(e.target.value)}
                  onKeyPress={handleGlobalSearchKeyPress}
                  className="w-64 pl-10 pr-4 py-2 border border-border-light rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                />
                <i className="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-text-secondary"></i>
              </div>
            </div>
            
            {/* 用户菜单 */}
            <div className="flex items-center space-x-4">
              <button 
                onClick={handleNotificationsClick}
                className="relative p-2 text-text-secondary hover:text-primary transition-colors"
              >
                <i className="fas fa-bell text-lg"></i>
                <span className="absolute -top-1 -right-1 w-3 h-3 bg-danger rounded-full"></span>
              </button>
              
              {/* 未登录状态 */}
              <div className="flex items-center space-x-3">
                <Link to="/login" className="px-4 py-2 text-text-secondary hover:text-primary transition-colors">登录</Link>
                <Link to="/register" className="px-4 py-2 bg-primary text-white rounded-lg hover:bg-blue-600 transition-colors">注册</Link>
              </div>
            </div>
          </div>
        </div>
      </header>

      <div className="flex pt-16">
        {/* 左侧菜单 */}
        <aside className="w-64 bg-white border-r border-border-light min-h-screen">
          <nav className="p-4">
            <ul className="space-y-2">
              <li>
                <Link to="/home" className="flex items-center space-x-3 px-4 py-3 text-text-secondary hover:bg-gray-50 rounded-lg transition-colors">
                  <i className="fas fa-home text-lg"></i>
                  <span>首页</span>
                </Link>
              </li>
              <li>
                <Link to="/course-list" className="flex items-center space-x-3 px-4 py-3 text-text-secondary hover:bg-gray-50 rounded-lg transition-colors">
                  <i className="fas fa-book text-lg"></i>
                  <span>课程中心</span>
                </Link>
              </li>
              <li>
                <Link to="/personal-center" className="flex items-center space-x-3 px-4 py-3 text-text-secondary hover:bg-gray-50 rounded-lg transition-colors">
                  <i className="fas fa-user text-lg"></i>
                  <span>个人中心</span>
                </Link>
              </li>
              <li>
                <Link to="/about-us" className="flex items-center space-x-3 px-4 py-3 text-text-secondary hover:bg-gray-50 rounded-lg transition-colors">
                  <i className="fas fa-info-circle text-lg"></i>
                  <span>关于我们</span>
                </Link>
              </li>
              <li>
                <Link to="/help-center" className="flex items-center space-x-3 px-4 py-3 text-text-secondary hover:bg-gray-50 rounded-lg transition-colors">
                  <i className="fas fa-question-circle text-lg"></i>
                  <span>帮助中心</span>
                </Link>
              </li>
              <li>
                <Link to="/privacy-policy" className={`flex items-center space-x-3 px-4 py-3 ${styles.sidebarLinkActive} rounded-lg transition-colors`}>
                  <i className="fas fa-shield-alt text-lg"></i>
                  <span>隐私政策</span>
                </Link>
              </li>
              <li>
                <Link to="/user-agreement" className="flex items-center space-x-3 px-4 py-3 text-text-secondary hover:bg-gray-50 rounded-lg transition-colors">
                  <i className="fas fa-file-contract text-lg"></i>
                  <span>用户协议</span>
                </Link>
              </li>
            </ul>
          </nav>
        </aside>

        {/* 主内容区域 */}
        <main className="flex-1 min-w-0">
          <div className="max-w-4xl mx-auto px-6 py-8">
            {/* 页面头部 */}
            <div className="mb-8">
              <nav className="flex items-center text-sm text-text-secondary mb-4">
                <span className={styles.breadcrumbItem}>首页</span>
                <span className={styles.breadcrumbItem}>隐私政策</span>
              </nav>
              <h1 className="text-3xl font-bold text-text-primary mb-2">隐私政策</h1>
              <p className="text-text-secondary">最后更新时间：2024年1月15日</p>
            </div>

            {/* 隐私政策内容 */}
            <div className="bg-white rounded-xl shadow-card p-8">
              <div className="space-y-8">
                {/* 引言 */}
                <section>
                  <p className="text-text-secondary leading-relaxed">
                    欢迎使用学途！我们深知您对个人信息保护的重视，本隐私政策将向您详细说明我们如何收集、使用、存储和保护您的个人信息。请您仔细阅读本政策，了解我们的隐私保护措施。
                  </p>
                </section>

                {/* 信息收集 */}
                <section>
                  <h2 className="text-xl font-semibold text-text-primary mb-4">一、我们收集的信息</h2>
                  <div className="space-y-4">
                    <div>
                      <h3 className="font-medium text-text-primary mb-2">1. 注册信息</h3>
                      <ul className="list-disc list-inside text-text-secondary space-y-1 ml-4">
                        <li>邮箱地址或手机号码</li>
                        <li>密码（经过加密存储）</li>
                        <li>姓名</li>
                        <li>学号（可选）</li>
                      </ul>
                    </div>
                    <div>
                      <h3 className="font-medium text-text-primary mb-2">2. 学习信息</h3>
                      <ul className="list-disc list-inside text-text-secondary space-y-1 ml-4">
                        <li>报名的课程记录</li>
                        <li>学习进度和成绩</li>
                        <li>课程评论和互动记录</li>
                        <li>学习时长和频率</li>
                      </ul>
                    </div>
                    <div>
                      <h3 className="font-medium text-text-primary mb-2">3. 设备和使用信息</h3>
                      <ul className="list-disc list-inside text-text-secondary space-y-1 ml-4">
                        <li>IP地址和设备信息</li>
                        <li>浏览器类型和版本</li>
                        <li>访问时间和页面记录</li>
                        <li>Cookie和类似技术信息</li>
                      </ul>
                    </div>
                  </div>
                </section>

                {/* 信息使用 */}
                <section>
                  <h2 className="text-xl font-semibold text-text-primary mb-4">二、信息使用目的</h2>
                  <div className="space-y-3">
                    <div className="flex items-start space-x-3">
                      <div className="w-2 h-2 bg-primary rounded-full mt-2 flex-shrink-0"></div>
                      <p className="text-text-secondary">提供课程报名、学习和管理服务</p>
                    </div>
                    <div className="flex items-start space-x-3">
                      <div className="w-2 h-2 bg-primary rounded-full mt-2 flex-shrink-0"></div>
                      <p className="text-text-secondary">处理支付和交易</p>
                    </div>
                    <div className="flex items-start space-x-3">
                      <div className="w-2 h-2 bg-primary rounded-full mt-2 flex-shrink-0"></div>
                      <p className="text-text-secondary">发送课程通知和学习提醒</p>
                    </div>
                    <div className="flex items-start space-x-3">
                      <div className="w-2 h-2 bg-primary rounded-full mt-2 flex-shrink-0"></div>
                      <p className="text-text-secondary">提供个性化课程推荐</p>
                    </div>
                    <div className="flex items-start space-x-3">
                      <div className="w-2 h-2 bg-primary rounded-full mt-2 flex-shrink-0"></div>
                      <p className="text-text-secondary">改进和优化平台功能</p>
                    </div>
                    <div className="flex items-start space-x-3">
                      <div className="w-2 h-2 bg-primary rounded-full mt-2 flex-shrink-0"></div>
                      <p className="text-text-secondary">防范安全威胁和欺诈行为</p>
                    </div>
                  </div>
                </section>

                {/* 信息共享 */}
                <section>
                  <h2 className="text-xl font-semibold text-text-primary mb-4">三、信息共享和披露</h2>
                  <div className="space-y-4">
                    <div>
                      <h3 className="font-medium text-text-primary mb-2">我们不会向第三方出售、出租或以其他方式披露您的个人信息，除非：</h3>
                      <ul className="list-disc list-inside text-text-secondary space-y-1 ml-4">
                        <li>获得您的明确同意</li>
                        <li>法律法规要求或政府部门要求</li>
                        <li>为保护我们的权利、财产或安全</li>
                        <li>与我们的服务提供商共享（仅限于提供服务所需）</li>
                      </ul>
                    </div>
                  </div>
                </section>

                {/* 信息保护 */}
                <section>
                  <h2 className="text-xl font-semibold text-text-primary mb-4">四、信息安全保护</h2>
                  <div className="space-y-3">
                    <div className="flex items-start space-x-3">
                      <div className="w-2 h-2 bg-success rounded-full mt-2 flex-shrink-0"></div>
                      <p className="text-text-secondary">采用SSL/TLS加密技术保护数据传输</p>
                    </div>
                    <div className="flex items-start space-x-3">
                      <div className="w-2 h-2 bg-success rounded-full mt-2 flex-shrink-0"></div>
                      <p className="text-text-secondary">密码采用加盐哈希算法存储</p>
                    </div>
                    <div className="flex items-start space-x-3">
                      <div className="w-2 h-2 bg-success rounded-full mt-2 flex-shrink-0"></div>
                      <p className="text-text-secondary">严格的访问控制和权限管理</p>
                    </div>
                    <div className="flex items-start space-x-3">
                      <div className="w-2 h-2 bg-success rounded-full mt-2 flex-shrink-0"></div>
                      <p className="text-text-secondary">定期安全审计和漏洞修复</p>
                    </div>
                    <div className="flex items-start space-x-3">
                      <div className="w-2 h-2 bg-success rounded-full mt-2 flex-shrink-0"></div>
                      <p className="text-text-secondary">员工安全培训和保密协议</p>
                    </div>
                  </div>
                </section>

                {/* 用户权利 */}
                <section>
                  <h2 className="text-xl font-semibold text-text-primary mb-4">五、您的权利</h2>
                  <div className="space-y-4">
                    <div>
                      <h3 className="font-medium text-text-primary mb-2">您对自己的个人信息享有以下权利：</h3>
                      <ul className="list-disc list-inside text-text-secondary space-y-1 ml-4">
                        <li><strong>访问权：</strong>查看我们收集的您的个人信息</li>
                        <li><strong>更正权：</strong>要求更正不准确或不完整的信息</li>
                        <li><strong>删除权：</strong>要求删除您的个人信息（在特定条件下）</li>
                        <li><strong>撤回同意：</strong>随时撤回您之前给予的同意</li>
                        <li><strong>数据可携权：</strong>以结构化格式获取您的数据</li>
                      </ul>
                    </div>
                  </div>
                </section>

                {/* Cookie政策 */}
                <section>
                  <h2 className="text-xl font-semibold text-text-primary mb-4">六、Cookie和类似技术</h2>
                  <div className="space-y-3">
                    <p className="text-text-secondary">
                      我们使用Cookie和类似技术来改善您的用户体验，包括记住您的登录状态、偏好设置和分析网站使用情况。您可以通过浏览器设置来管理Cookie。
                    </p>
                    <div className="bg-gray-50 rounded-lg p-4">
                      <h4 className="font-medium text-text-primary mb-2">我们使用的Cookie类型：</h4>
                      <ul className="list-disc list-inside text-text-secondary space-y-1 ml-4">
                        <li>必要Cookie：确保网站基本功能正常运行</li>
                        <li>功能Cookie：记住您的偏好设置</li>
                        <li>分析Cookie：帮助我们了解网站使用情况</li>
                      </ul>
                    </div>
                  </div>
                </section>

                {/* 未成年人保护 */}
                <section>
                  <h2 className="text-xl font-semibold text-text-primary mb-4">七、未成年人保护</h2>
                  <p className="text-text-secondary">
                    我们不会故意收集14岁以下儿童的个人信息。如果我们发现在未经父母同意的情况下收集了儿童的个人信息，我们将立即删除相关信息。如果您认为我们可能收集了儿童的个人信息，请立即联系我们。
                  </p>
                </section>

                {/* 政策更新 */}
                <section>
                  <h2 className="text-xl font-semibold text-text-primary mb-4">八、隐私政策更新</h2>
                  <p className="text-text-secondary">
                    我们可能会不时更新本隐私政策。当我们对隐私政策进行重大更改时，我们将通过网站公告、邮件或其他适当方式通知您。请您定期查看本政策的最新版本。
                  </p>
                </section>

                {/* 联系我们 */}
                <section>
                  <h2 className="text-xl font-semibold text-text-primary mb-4">九、联系我们</h2>
                  <div className="bg-gray-50 rounded-lg p-6">
                    <p className="text-text-secondary mb-4">
                      如果您对本隐私政策有任何疑问、意见或建议，或者需要行使您的个人信息权利，请通过以下方式联系我们：
                    </p>
                    <div className="space-y-3">
                      <div className="flex items-center space-x-3">
                        <i className="fas fa-envelope text-primary"></i>
                        <span className="text-text-secondary">邮箱：privacy@xuetu.com</span>
                      </div>
                      <div className="flex items-center space-x-3">
                        <i className="fas fa-phone text-primary"></i>
                        <span className="text-text-secondary">电话：400-888-9999</span>
                      </div>
                      <div className="flex items-center space-x-3">
                        <i className="fas fa-map-marker-alt text-primary"></i>
                        <span className="text-text-secondary">地址：北京市朝阳区学途教育科技有限公司</span>
                      </div>
                    </div>
                  </div>
                </section>
              </div>
            </div>
          </div>
        </main>
      </div>

      {/* 页脚 */}
      <footer className="bg-white border-t border-border-light py-12">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div>
              <h3 className="font-semibold text-text-primary mb-4">关于学途</h3>
              <ul className="space-y-2 text-text-secondary text-sm">
                <li><Link to="/about-us" className="hover:text-primary transition-colors">公司简介</Link></li>
                <li><a href="#" className="hover:text-primary transition-colors">联系我们</a></li>
                <li><a href="#" className="hover:text-primary transition-colors">招聘信息</a></li>
              </ul>
            </div>
            
            <div>
              <h3 className="font-semibold text-text-primary mb-4">帮助中心</h3>
              <ul className="space-y-2 text-text-secondary text-sm">
                <li><Link to="/help-center" className="hover:text-primary transition-colors">常见问题</Link></li>
                <li><a href="#" className="hover:text-primary transition-colors">使用指南</a></li>
                <li><a href="#" className="hover:text-primary transition-colors">意见反馈</a></li>
              </ul>
            </div>
            
            <div>
              <h3 className="font-semibold text-text-primary mb-4">法律条款</h3>
              <ul className="space-y-2 text-text-secondary text-sm">
                <li><Link to="/privacy-policy" className="hover:text-primary transition-colors">隐私政策</Link></li>
                <li><Link to="/user-agreement" className="hover:text-primary transition-colors">用户协议</Link></li>
                <li><a href="#" className="hover:text-primary transition-colors">版权声明</a></li>
              </ul>
            </div>
            
            <div>
              <h3 className="font-semibold text-text-primary mb-4">关注我们</h3>
              <div className="flex space-x-4">
                <a href="#" className="w-8 h-8 bg-gray-100 rounded-lg flex items-center justify-center text-text-secondary hover:bg-primary hover:text-white transition-colors">
                  <i className="fab fa-weixin"></i>
                </a>
                <a href="#" className="w-8 h-8 bg-gray-100 rounded-lg flex items-center justify-center text-text-secondary hover:bg-primary hover:text-white transition-colors">
                  <i className="fab fa-weibo"></i>
                </a>
                <a href="#" className="w-8 h-8 bg-gray-100 rounded-lg flex items-center justify-center text-text-secondary hover:bg-primary hover:text-white transition-colors">
                  <i className="fab fa-qq"></i>
                </a>
              </div>
            </div>
          </div>
          
          <div className="border-t border-border-light mt-8 pt-8 text-center text-text-secondary text-sm">
            <p>&copy; 2024 学途教育科技有限公司. 保留所有权利.</p>
          </div>
        </div>
      </footer>
    </div>
  );
};

export default PrivacyPolicyPage;

